<template>
  <div>
    <!--    添加角色-->
    <el-button type="primary" @click="setRoleVisible=true">添加角色</el-button>
    <SetRole :id.sync="id" :setRoleVisible.sync="setRoleVisible" :title="title" @getRoleList="getRoleList"></SetRole>
    <!--    /添加角色-->
    <!--    角色列表-->
    <el-table :data="roleList" border class="table-m" stripe>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form class="demo-table-expand" label-position="left">
            <el-form-item
              v-for="(item,i1) in scope.row.children"
              :key="item.id"
              class="transverse"
            >
              <div class="flex1">
                <el-tag>
                  {{ item.authName }}
                  <i class="el-icon-caret-right"></i>
                </el-tag>
              </div>
              <div style="flex: 2">
                <div
                  v-for="(item2,i2) in item.children"
                  :key="item2.id"
                  class="children2"
                >
                  <div class="flex2">
                    <el-tag type="success">
                      {{ item2.authName }}
                      <i class="el-icon-caret-right"></i>
                    </el-tag>
                  </div>
                  <div class="children3">
                    <transition-group class="children3-1" name="el-zoom-in-center">
                      <div v-for="(item3,i3) in item2.children" :key="item3.id">
                        <el-tag type="warning">
                          {{ item3.authName }}
                          <i class="el-icon-close" @click="clickRemove(item3.id,scope.row,i1,i2,i3,scope.$index)"></i>
                        </el-tag>
                      </div>
                    </transition-group>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="#" prop="id" type="index" width="48">
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作" width="290px">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="editRole(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="removeRole(scope.$index, scope.row)"
          >删除
          </el-button>
          <el-button
            icon="el-icon-setting"
            size="mini"
            type="warning"
            @click="setPower(scope.$index, scope.row)"
          >分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    /角色列表-->

    <!--    分配权限-->
    <el-dialog :visible.sync="setPowerVisible" title="收货地址">
      <el-tree
        ref="tree"
        :data="dataTree"
        :props="defaultProps"
        default-expand-all
        highlight-current
        node-key="id"
        show-checkbox>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setPowerVisible = false">取 消</el-button>
        <el-button type="primary" @click="putPower">确 定</el-button>
      </div>
    </el-dialog>
    <!--    /分配权限-->
  </div>
</template>

<script>
import { deleteRole, getRoles } from '@/api/role'
import SetRole from '@/views/roles/SetRole'
import { deleteRolesTree, getRolesTree, postRolesTree } from '@/api/rights'
import { difference } from 'lodash'

export default {
  name: 'roles',
  data () {
    return {
      roleList: [],
      setRoleVisible: false,
      title: '添加角色',
      id: '',
      setPowerVisible: false,
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      dataTree: [],
      keys: [],
      PowerID: ''
    }
  },
  methods: {
    // 编辑角色
    editRole (index, item) {
      this.title = '编辑角色'
      // console.log(item)
      this.id = item.id
    },
    // 删除
    removeRole (index, item) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(str.id)
        deleteRole(item.id).then(res => {
          if (res.meta.status === 200) {
            this.$message({
              message: res.meta.msg,
              type: 'success'
            })
            this.getRoleList()
          } else {
            this.$message.error(res.meta.msg)
          }
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分配权限
    setPower (index, item) {
      this.getRolesTree(index)
      this.PowerID = item.id
    },
    // 获得权限树
    async getRolesTree (index) {
      const res = await getRolesTree()
      // console.log(res.data)
      this.dataTree = res.data

      this.setPowerVisible = true
      // 遍历该角色权限数组
      const arr = []
      this.roleList[index].children.forEach(items => {
        // arr1.push(items.id)
        items.children.forEach(item => {
          // arr1.push(item.id)
          item.children.forEach(i => {
            arr.push(i.id)
          })
        })
      })
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys(arr)
      }, 0)
    },
    // 发起权限修改请求
    async putPower () {
      // 当前选中的权限数组
      const arr = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ].join(',')
      // 遍历所有权限数组
      const arr1 = []
      this.dataTree.forEach(items => {
        // arr2.push(items.id)
        items.children.forEach(item => {
          // arr2.push(item.id)
          item.children.forEach(i => {
            arr1.push(i.id)
          })
        })
      })
      const arr2 = difference(arr1, this.$refs.tree.getCheckedKeys(true))
      try {
        // 授予权限
        await postRolesTree(this.PowerID, arr)
        // 取消权限
        await deleteRolesTree(this.PowerID, arr2)
        this.$message({
          message: '权限修改成功',
          type: 'success'
        })
        this.setPowerVisible = false
        // 刷新列表
        await this.getRoleList()
      } catch {
        this.$message.error('权限设置失败')
      }
    },
    // 删除单个权限
    async clickRemove (id, item, i1, i2, i3, index) {
      console.log(item, 1)
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(str.id)
        deleteRolesTree(item.id, id).then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            this.$message({
              message: res.meta.msg,
              type: 'success'
            })
            // console.log(this.roleList[0].children[i1].children[i2].children[i3])
            // this.getRoleList()
            this.roleList[index].children[i1].children[i2].children.splice(i3, 1)
          } else {
            this.$message.error(res.meta.msg)
          }
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取角色列表
    async getRoleList () {
      const res = await getRoles()
      // console.log(res.data)
      this.roleList = res.data
    },
    update (bool) {
      this.setRoleVisible = bool
    }
  },
  created () {
    this.getRoleList()
  },
  components: {
    SetRole
  }
}
</script>

<style lang="less" scoped>
/deep/ .table-m * {
  font-size: 12px;
}

.el-table {
  width: 100%;
  margin: 15px 0;
}

.demo-table-expand {
  margin: 20px 50px;
  font-size: 0;
  border-top: 1px solid #eee;

  /deep/ .transverse {
    width: 100% !important;

    .flex1 {
      flex: 1;
      border-bottom: 1px solid #eee;
      position: relative;

      i {
        position: absolute;
        top: 50%;
        right: -19px;
        transform: translateY(-50%);
        color: #606266;
      }

      .el-tag {
        position: absolute;
        top: 50%;
        transform: translateY(-23px);
      }
    }

    .flex2 {
      flex: 4;
      border-bottom: 1px solid #eee;
      position: relative;

      i {
        position: absolute;
        top: 50%;
        right: -19px;
        transform: translateY(-50%);
        color: #606266;
      }

      .el-tag {
        position: absolute;
        top: 50%;
        transform: translateY(-23px);
      }
    }

    .el-tag {
      margin: 7px;
    }

    .el-form-item__content {
      display: flex;

      .children2 {
        display: flex;

        .children3 {
          flex: 9;

          .children3-1 {
            display: flex;
            flex: 9;
            flex-wrap: wrap;
            border-bottom: 1px solid #eee;
          }

          i {
            border-radius: 50%;
          }

          i:hover {
            background-color: #e6a23c;
            color: #fff;
          }
        }
      }
    }
  }
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
